<template>
	<view>
		<!-- use-chat-record-mode：开启聊天记录模式 -->
		<!-- use-virtual-list：开启虚拟列表模式 -->
		<!-- cell-height-mode：设置虚拟列表模式高度不固定 -->
		<!-- safe-area-inset-bottom：开启底部安全区域适配 -->
		<!-- bottom-bg-color：设置slot="bottom"容器的背景色，这里设置为和chat-input-bar的背景色一致 -->
		<z-paging ref="paging" v-model="talkList" use-chat-record-mode use-virtual-list cell-height-mode="dynamic"
			safe-area-inset-bottom bottom-bg-color="#f8f8f8" @query="getHistoryMsg"
			@keyboardHeightChange="keyboardHeightChange" @hidedKeyboard="hidedKeyboard">

			<!-- style="transform: scaleY(-1)"必须写，否则会导致列表倒置！！！ -->
			<!-- 注意不要直接在chat-item组件标签上设置style，因为在微信小程序中是无效的，请包一层view -->
			<template #cell="{ item, index }">
				<view style="transform: scaleY(-1)">
					<chat-item :item="item" :index="index" :ref="'chatItem' + index" :key="index"
						@customEvent="parentMethod"></chat-item>
				</view>
			</template>

			<!-- 底部聊天输入框 -->
			<template #bottom>
				<chat-input-bar ref="inputBar" @send="send" @handleOpen="handleopen" />
			</template>
		</z-paging>
    <!-- <text class="icon iconfont icon-fasong-shixin" style='font-size: 90px;'></text> -->
		<user-model ref="userModel" :chatIntegral="chatIntegral" @save="updateUserInfo"></user-model>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
const globalData = getApp().globalData

import chatInputBar from '@/components/chat-input-bar/chat-input-bar.vue'
import chatItem from '@/components/chat-item/chat-item.vue'
import userModel from '@/components/user-model/user-model.vue'
export default {
	components: { chatInputBar, chatItem, userModel },
	data () {
		return {
			// 签到
			isSign: false,
			signShow: false,
			signTitle: '',
			signIntegral: 0,
			inviteIntegral: 0,
			adIntegral: 0,
			chatIntegral: 0,
			// 登录弹窗
			loginShow: false,
			talkList: [],
			content: '',
			downShow: false,
			downTitle: '',
			show: false,

			socketState: false,
			sendState: false,
			isTyping: false,
			currentMassage: {},
			currentIndex: 0,
			currentContent: '',
			typingInterval: 5,
			userInfo: null,
			imitateMsgList: [
				// { is_end: false, result: '你好，这是一条模拟消息回复。' },
				// { is_end: false, result: '请问有什么问题我可以为您解答吗？' },
				// { is_end: false, result: '我可以协助您完成范围广泛的任务并提供有关各种主题的信息，比如回答问题，提供定义和解释及建议，如果您有任何具体需要帮助，可以随时问我，' },
				{ is_end: true, result: '我很乐意为您提供帮助。' },
			],
			imitateIndex: 0

		}
	},
	onLoad (options) {
		this.userInfo = this.getLoginUserInfo()
	},
	methods: {
		parentMethod () {
			console.log('父组件方法被调用')
			this.$refs.chatItem0.clearHandle()
			this.$refs.chatItem2.clearHandle()
			this.$refs.chatItem4.clearHandle()
			this.$refs.chatItem6.clearHandle()
			this.$refs.chatItem8.clearHandle()
			this.$refs.chatItem10.clearHandle()
			this.$refs.chatItem12.clearHandle()
			this.$refs.chatItem14.clearHandle()
			this.$refs.chatItem16.clearHandle()
			this.$refs.chatItem18.clearHandle()
		},
		updateUserInfo () {
			this.userInfo = this.getLoginUserInfo()
		},
		// 获取历史消息
		getHistoryMsg () {
			let get = async () => {
				let data = []
				// let data = [{
				// 	content: globalData.appName + '为您服务：\n1. 知乎百度答题、做作业题目\n2. 写代码、写文案、写论文，写小说\n3. 文案润色、翻译、写诗作词\n4. 扮演面试官、扮演书籍电影角色\n例1：写一篇工作日报我是行政\n例2：帮我写作业，题目是xxx\n例3：把下文翻译成英文：xxx\n例4：写一出能活的短视频剧本\n例5：英文写物理相关的论文\n或者可以问我其他问题\n越完整的描述，我越精确', // 消息内容
				// 	type: 0,// 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
				// 	state: 0,
				// 	icon: '/static/logo.png',
				// 	end: true
				// }]
				this.$refs.paging.complete(data)
			}
			get()
		},
		// 监听键盘高度改变，请不要直接通过uni.onKeyboardHeightChange监听，否则可能导致z-paging内置的键盘高度改变监听失效（如果不需要切换表情面板则不用写）
		keyboardHeightChange (res) {
			this.$refs.inputBar.updateKeyboardHeightChange(res)
		},
		// 用户尝试隐藏键盘，此时如果表情面板在展示中，应当通知chatInputBar隐藏表情面板（如果不需要切换表情面板则不用写）
		hidedKeyboard () {
			this.$refs.inputBar.hidedKeyboard()
		},
		socketInit () {
			connectWebSocket(G.ws)
			this.$Socket.eventPatch.onOpen((msg, sk) => {        //监听是否连接成功
				this.$data.socketState = true
				this.onmessage() 		// 监听消息接
			})
			this.$Socket.eventPatch.onClose((msg, sk) => {        //监听是否连接成功
				this.$data.socketState = false
			})
		},
		onmessage () {
			var that = this
			//当websocket收到后端发送的消息时，触发
			this.$Socket.eventPatch.onMsg((msg, sk) => {    //监听是否接受消息
				that.$data.socketState = true
				if (msg.type === 'message') {
					if (msg.code == 200) {
						if (msg.data.type === 'deduct') {
							// 积分扣除成功
							that.userInfo.integral = that.userInfo.integral - parseInt(msg.data.integral)
							uni.setStorage({
								key: 'USERINFO',
								data: JSON.stringify(that.userInfo),
							})
						} else {
							that.$data.currentMassage = msg.data
							that.$data.currentContent += msg.data.result

							that.startTyping()
						}
					} else {
						that.$refs.uTips.show({ title: msg.msg, type: 'error', duration: '2300' })
						that.talkList[0].content = msg.msg
						that.talkList[0].end = true
						that.$data.currentIndex = 0
						that.$data.currentContent = ''
						that.$data.sendState = false
						if (msg.code === '3030') {
							setTimeout(function () {
								that.$refs.userModel.open('login')
							}, 2300)
						}
					}
				}
			})
		},
		startTyping () {
			if (this.isTyping) return
			var that = this
			this.isTyping = true
			setTimeout(() => {
				if (this.currentIndex <= this.currentContent.length) {
					that.talkList[0].state = 1
					that.talkList[0].content = this.currentContent.substring(0, this.currentIndex++)
					that.$forceUpdate()
					// 	// 设置当前滚动的位置
					//that.setPageScrollTo();
					this.isTyping = false
					this.startTyping()
				} else {
					if (that.$data.currentMassage.is_end) {
						that.talkList[0].end = true
						that.$data.currentIndex = 0
						that.$data.currentContent = ''
						that.$data.sendState = false
					}
					this.isTyping = false
				}
			}, this.typingInterval)
		},
		handleopen () {
			this.$refs.userModel.open('base')
		},
		send (msg) {
			var that = this
			that.content = msg
			if (this.$data.sendState) {
				return false
			}
			/*if(!that.userInfo){
				this.$refs.userModel.open('login');
				return false;
			}*/
			if (!that.content) {
				that.$refs.uTips.show({ title: '请输入有效的内容', type: 'error', duration: '2300' })
				return false
			}
			/*if(this.chatIntegral > 0){
				var integral = this.userInfo.integral
				if(integral < this.chatIntegral){
					that.$refs.uTips.show({title: '提问需要 '+this.chatIntegral+' 积分,当前积分不足！',type: 'error',duration: '1500'});
					setTimeout(function(){
						that.$refs.userModel.open('base');
					},1500);
					return false;
				}
			}*/
			that.$refs.inputBar.setMsg('')
			/*if(!this.$data.socketState){
				this.socketInit();
			}*/
			that.$data.sendState = true
			that.talkList.unshift({
				content: that.content, // 消息内容
				type: 1,// 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
				state: 1,
				icon: (this.userInfo && this.userInfo.icon ? this.userInfo.icon : '/static/avatar.png'),
			})
			that.talkList.unshift({
				content: '', // 消息内容
				type: 0,// 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
				state: 0,
				end: false,
				icon: '/static/doctor.png',
			})
			this.$forceUpdate()
			this.imitateIndex = 0
			this.toSend(msg)
		},
		// 发送信息
		toSend (msg) {
			const that = this
			that.startTyping()
			uni.request({
				url: '/api/chat/message', // 替换为实际的 API 地址
				method: 'POST',
				data: {
					conversation_id: uni.getStorageSync('conversationId') || '',
					sender_id: '123442',
					query: msg
				},
				success: function (res) {
					console.log(res.data.data.category === 'CASE')
					console.log('res.data.data.case', res.data.data.case)
					that.imitateIndex = 0
					if(res.data.data.category === 'CASE'){
						that.currentMassage = { is_end: true, result: res.data.data.case.advice}
						let postMsg = Object.assign({doctorAdvice: true}, res.data.data.case)
						// 这时候可以去掉 conversationId
						uni.removeStorageSync('conversationId')
						// 现在可以处理数据了
						//现病史
						let present_illness = ''
						if(res.data.data.case.present_illness.length === 0){
							present_illness = '<p style="padding-left: 6px;">待确认</p>'
						}else{
							present_illness = `
								<ul style="padding-left: 20px">
									${res.data.data.case.present_illness.map(item => `<li>${item.name}: ${item.value}</li>`).join('')}
								</ul>
							`
						}

						// 既往史
						let past_medical_history= ''
						if(res.data.data.case.past_medical_history.length === 0){
							past_medical_history = '<p style="padding-left: 6px;">待确认</p>'
						}else{
							past_medical_history = `
								<ul style="padding-left: 20px">
									${res.data.data.case.past_medical_history.map(item => `<li>${item.name}: ${item.value}</li>`).join('')}
								</ul>
							`
						}

						// 个人史
						let personal_history= ''
						if(res.data.data.case.personal_history.length === 0){
							personal_history = '<p style="padding-left: 6px;">待确认</p>'
						}else{
							personal_history = `
								<ul style="padding-left: 20px">
									${res.data.data.case.personal_history.map(item => `<li>${item.name}: ${item.value}</li>`).join('')}
								</ul>
							`
						}

						// 家族史
						let family_history= ''
						if(res.data.data.case.family_history.length === 0){
							family_history = '<p style="padding-left: 6px;">待确认</p>'
						}else{
							family_history = `
								<ul style="padding-left: 20px">
									${res.data.data.case.family_history.map(item => `<li>${item.name}: ${item.value}</li>`).join('')}
								</ul>
							`
						}
						that.currentContent += 
						`doctorAdvice
							<h4 style="margin: 0 0 2px;">主诉</h4>
							<p>${ res.data.data.case.chief_complaint }</p>
							<h4 style="margin: 6px 0 2px;">现病史</h4>
							${present_illness}
							<h4 style="margin: 6px 0 2px;">既往史</h4>
							${past_medical_history}
							<h4 style="margin: 6px 0 2px;">个人史</h4>
							${personal_history}
							<h4 style="margin: 6px 0 2px;">家族史</h4>
							${family_history}
							<h4 style="margin: 6px 0 2px;">就诊建议</h4>
							<p style="padding-left: 6px;">${res.data.data.case.advice || '暂无'}</p>
							<h4 style="margin: 6px 0 2px;">就诊科室</h4>
							<p style="padding-left: 6px;">${res.data.data.case.department || '暂无'}</p>
						`
						that.startTyping()
					}else{
						uni.setStorageSync('conversationId', res.data.data.conversation_id)
						that.currentMassage = { is_end: true, result: res.data.data.response}
						that.currentContent += res.data.data.response
						that.startTyping()
					}
				},
				fail: function (err) {
					console.error('请求失败:', err)
				},
				complete: function () {
					console.log('请求完成')
				}
			})
			return
			var times = Math.floor(Math.random() * 2000) + 500
			// 模拟接收消息
			setTimeout(function () {
				console.log('模拟消息：', that.imitateMsgList)
				that.currentMassage = that.imitateMsgList[that.imitateIndex]
				that.currentContent += that.currentMassage.result
				that.startTyping()
				console.log('模拟消息：', that.imitateIndex)
				if (that.imitateIndex >= that.imitateMsgList.length - 1) {
					that.imitateIndex = 0
				} else {
					that.imitateIndex++
					that.toSend()
				}
			}, times)
			/*
			if(!this.$data.socketState){
				setTimeout(function(){
					that.toSend();
				},200);
				return false;
			}
			let messages = [];
			for(var i=that.talkList.length-1;i>0;i--){
				if(that.talkList[i].state == 1){
					messages.push({
						content: that.talkList[i].content,
						role: that.talkList[i].type==1?'user':'assistant'
					});
				}
			}
			that.content = '';

			this.$Socket.nsend({
				type:'message',
				token:this.userInfo.token,
				id:this.$data.id,
				integral:this.$data.chatIntegral,
				data:messages
			});*/
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #ffffff;
	font-size: 28rpx;
	box-sizing: border-box;
	color: #333;
	letter-spacing: 0;
	word-wrap: break-word;
}
</style>
